<script setup lang="ts">
import { ref } from 'vue'

// ref获取dom
const imgDom = ref<HTMLImageElement | null>(null)
const btnClick = () => {
  // console.log(imgDom.value)
  //  as 断言
  //  ? 只能用于get, 它前面的值如果是unll或者undefined,它返回undefined,不是返回它后面的值
  //  ! 非空断言 断言它前面的值一定不是null或者undefined(可用于get或者set)
  // imgDom.value!.src = ''
  // if (imgDom.value) {
  //   imgDom.value.src = ''
  // }
  // console.log(imgDom.value?.src)
  imgDom.value!.src = '123'
  console.log(imgDom.value!.src)
}

const user = ref<{
  userInfo?: {
    name: string
  }
}>({})

setTimeout(() => {
  user.value.userInfo = {
    name: '张三'
  }
}, 5000)
</script>

<template>
  <img
    src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
    ref="imgDom"
    alt=""
  />
  <button @click="btnClick">获取imgDom</button>
  <hr />
  <h3>{{ user.userInfo?.name }}</h3>
</template>

<style></style>
